<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { getThemeColor, subscribe } from '../../assets/theme.js';

const { t } = useI18n();

const bgColor = ref(getThemeColor('statusbar.background'));
const textColor = ref(getThemeColor('statusbar.foreground'));

const onThemeChange = () => {
  bgColor.value = getThemeColor('statusbar.background');
  textColor.value = getThemeColor('statusbar.foreground');
};

let unsubscribe;
onMounted(() => {
  unsubscribe = subscribe(onThemeChange);
});

onUnmounted(() => {
  if (unsubscribe) {
    unsubscribe();
  }
});
</script>

<template>
  <div :class="`h-6 px-2 flex items-center justify-between text-xs ${bgColor} ${textColor}`">
    <div class="flex items-center gap-4">
      <!-- Placeholder for future dynamic content -->
    </div>
    <div class="flex items-center gap-4">
      <span>{{ t('statusbar.ln') }} 1, {{ t('statusbar.col') }} 1</span>
      <span>{{ t('statusbar.spaces') }}: 2</span>
      <span>{{ t('statusbar.encoding') }}</span>
      <span>{{ t('statusbar.language') }}</span>
      <span class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M2.4 18.55L12 3.45l9.6 15.1H2.4m-.73 1.5h20.66L12 1.45L1.67 20.05Z"/></svg>
        <span>{{ t('statusbar.git_branch') }}</span>
      </span>
      <span class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12S6.48 2 12 2m0 2c-4.42 0-8 3.58-8 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8m1 12H11v-2h2zm0-4H11V6h2z"/></svg>
        <span>{{ t('statusbar.feedback') }}</span>
      </span>
      <span class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="currentColor" d="M21 19v1H3v-1l2-2v-6c0-3.1 2.03-5.83 5-6.71V4a2 2 0 1 1 4 0v.29c2.97.88 5 3.61 5 6.71v6zm-7 2a2 2 0 1 1-4 0z"/></svg>
        <span>{{ t('statusbar.notifications') }}</span>
      </span>
    </div>
  </div>
</template>